import React from 'react';

export default () => {
  return (
    <div>
      <h1>模块解析</h1>
      <p>
        1.
        导入分为相对导入和非相对导入。相对导入不能解析为一个外部模块声明，所以自己写的模块使用相对导入。外部模块使用非相对路径来导入。
      </p>
      <p>2. TypeScript如何解析模块。</p>
      <ul>
        <li>相对路径</li>
        <li>
          /root/src/moduleB.ts
          <br />
          /root/src/moduleB.tsx
          <br />
          /root/src/moduleB.d.ts
          <br />
          /root/src/moduleB/package.json (如果指定了"types"属性)
          <br />
          /root/src/moduleB/index.ts
          <br />
          /root/src/moduleB/index.tsx
          <br />
          /root/src/moduleB/index.d.ts
        </li>
        <li>非相对路径</li>
        <li>
          /root/src/node_modules/moduleB.ts
          <br />
          /root/src/node_modules/moduleB.tsx
          <br />
          /root/src/node_modules/moduleB.d.ts
          <br />
          /root/src/node_modules/moduleB/package.json (如果指定了"types"属性)
          <br />
          /root/src/node_modules/moduleB/index.ts
          <br />
          /root/src/node_modules/moduleB/index.tsx
          <br />
          /root/src/node_modules/moduleB/index.d.ts
          <br />
          <br />
          /root/node_modules/moduleB.ts
          <br />
          /root/node_modules/moduleB.tsx
          <br />
          /root/node_modules/moduleB.d.ts
          <br />
          /root/node_modules/moduleB/package.json (如果指定了"types"属性)
          <br />
          /root/node_modules/moduleB/index.ts
          <br />
          /root/node_modules/moduleB/index.tsx
          <br />
          /root/node_modules/moduleB/index.d.ts
          <br />
          <br />
          /node_modules/moduleB.ts
          <br />
          /node_modules/moduleB.tsx
          <br />
          /node_modules/moduleB.d.ts
          <br />
          /node_modules/moduleB/package.json (如果指定了"types"属性)
          <br />
          /node_modules/moduleB/index.ts
          <br />
          /node_modules/moduleB/index.tsx
          <br />
          /node_modules/moduleB/index.d.ts
        </li>
      </ul>
      <p>
        3. 设置baseUrl来告诉编译器到哪里去查找模块。
        所有非相对模块导入都会被当做相对于 baseUrl。构建脚本会将它们集中到一起。
      </p>
      <p>
        4.
        baseUrl的值由命令行中baseUrl的值或‘tsconfig.json’里的baseUrl属性决定。
      </p>
      <p>
        5. tsconfig.json paths属性可以使用路径映射，相对于"baseUrl"进行解析。
      </p>
      <p>6. tsconfig.json rootDirs 可以告诉编译器生成虚拟目录</p>
      <p>7. 通过 --traceResolution 启用编译器的模块解析跟踪</p>
    </div>
  );
};
